<template>
	<view>
		<!-- 顶部组件 -->
		<u-navbar :background="navBar.top_bgc" :border-bottom="navBar.border" :back-icon-color="navBar.iconColor" id="nav-bar" :title="navBar.title" title-color="#fff"></u-navbar>
		<view class="top-bg"></view>
		<!-- 轮播图部分 -->
		<view class="top u-flex-col">
			<image class="title-img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/0e27d030-abd7-11ea-b43d-2358b31b6ce6.png"></image>
			<swiper class="swiper" :indicator-dots="false" autoplay :interval="4000" :duration="200" :circular="true" @change="swiperChange" easing-function="easeOutCubic">
				<swiper-item v-for="item in swiperList" :key="item.id" class="swiper-item">
					<image class="img" :src="item.img_gif" mode="aspectFill"></image>
					<view class="title u-flex-col">
						<view class="main">{{ item.title }}</view>
						<view class="sub u-flex">
							<text>{{ item.subtitle }}</text>
							<image src="../../../static/icon/icon_go.png"></image>
						</view>
					</view>
					<view class="tips">
						<image :src="item.time | tipsImg"></image>
						<view class="date">
							<text>{{ (item.time / 1000) | date('mm') }}</text>
							<text class="sign">/</text>
							<text>{{ (item.time / 1000) | date('dd') }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="dots-box u-flex"><view v-for="(item, index) in swiperList.length" :key="index" :class="['item', index == swiperCurrent ? 'active' : '']"></view></view>
		</view>
		<!-- 今日上新 -->
		<view class="card now-new" v-if="nowNew.title">
			<view class="head u-flex" :style="{ backgroundImage: `url(${nowNew.config.title_bg.image})` }">
				<view class="title">{{ nowNew.title }}</view>
				<view class="sub">{{ nowNew.subtitle }}</view>
			</view>
			<!-- 商品盒子 -->
			<view
				class="goods-box u-flex"
				v-for="(item, index) in nowNew.result.list"
				:key="index"
				@click="goToDetail(item.value.goods.gid)"
				v-if="index < nowNew.result.list.length - 6"
			>
				<u-lazy-load
					class="goods-img"
					:border-radius="12"
					:image="item.value.goods.img_square || item.value.goods.img800s"
					loading-img="/static/lazy/goods-lazy-load.png"
				></u-lazy-load>
				<view class="content u-flex-col">
					<view class="title u-line-1">{{ item.value.goods.attr_ext.custom_name }}</view>
					<view class="subtitle">{{ item.value.goods.extra_info.operation_desc }}</view>
					<view class="labelbox" v-if="item.value.goods.labels.length != 0">
						<text v-for="(litem, lindex) in item.value.goods.labels" :key="lindex">{{ litem.attr.text }}</text>
					</view>
					<view class="price u-flex">
						<text>￥</text>
						<text class="priceMin">{{ item.value.goods.price_min / 100 }}</text>
						<text class="spec" v-if="item.value.goods.price_tag">起</text>
						<text class="marketPrice" v-if="item.price_min != item.value.goods.market_price">￥{{ item.value.goods.market_price / 100 }}</text>
						<view class="go-to-detail">立即查看</view>
					</view>
				</view>
			</view>
			<!-- 横向排列 -->
			<view class="goods-box-row u-flex">
				<view
					class="content"
					v-for="(item, lindex) in nowNew.result.list"
					:key="lindex"
					@click="goToDetail(item.value.goods.gid)"
					v-if="lindex >= nowNew.result.list.length - 6"
				>
					<u-lazy-load
						class="goods-img"
						:border-radius="12"
						:image="item.value.goods.img_square || item.value.goods.img800s"
						loading-img="/static/lazy/goods-lazy-load.png"
					></u-lazy-load>
					<view class="title u-line-1">{{ item.value.goods.attr_ext.custom_name }}</view>
					<view class="subtitle">{{ item.value.goods.extra_info.operation_desc }}</view>
					<view class="price">
						<text>￥</text>
						<text class="priceMin">{{ item.value.goods.price_min / 100 }}</text>
						<text class="spec" v-if="item.value.goods.price_tag">起</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 广告banner -->
		<view class="ad-banner" v-if="nowNew.title"><image src="https://img.youpin.mi-img.com/jianyu/fe93294806c66ab3d29d06943afb82b7.png" mode="aspectFill"></image></view>
		<!-- 15日新品榜 -->
		<view class="card 15new" v-if="new15.title">
			<view class="head u-flex" :style="{ backgroundImage: `url(${new15.config.title_bg.image})` }">
				<view class="title">{{ new15.title }}</view>
				<view class="sub">{{ new15.subtitle }}</view>
			</view>
			<!-- 商品盒子 -->
			<view class="goods-box u-flex" v-for="(item, index) in new15.result.list" :key="index" @click="goToDetail(item.value.goods.gid)" v-if="index < 5">
				<u-lazy-load
					class="goods-img"
					:border-radius="12"
					:image="item.value.goods.img_square || item.value.goods.img800s"
					loading-img="/static/lazy/goods-lazy-load.png"
				></u-lazy-load>
				<view class="content u-flex-col">
					<view class="title u-line-1">{{ item.value.goods.attr_ext.custom_name }}</view>
					<view class="subtitle">{{ item.value.goods.extra_info.operation_desc }}</view>
					<view class="labelbox" v-if="item.value.goods.labels.length != 0">
						<text v-for="(litem, lindex) in item.value.goods.labels" :key="lindex">{{ litem.attr.text }}</text>
					</view>
					<view class="price u-flex">
						<text>￥</text>
						<text class="priceMin">{{ item.value.goods.price_min / 100 }}</text>
						<text class="spec" v-if="item.value.goods.price_tag">起</text>
						<text class="marketPrice" v-if="item.price_min != item.value.goods.market_price">￥{{ item.value.goods.market_price / 100 }}</text>
					</view>
				</view>
				<image :src="`https://img.youpin.mi-img.com/static/weex_images/v1/LeaderboardNO${index + 1}.png`" class="ranking"></image>
			</view>
		</view>
		<!-- loading -->
		<full-loading :show="fullLoading" :top="70"></full-loading>
		<mi-toast ref="miToast"></mi-toast>
	</view>
</template>

<script>
import fullLoading from '@/components/full-loading.vue'
export default {
	data() {
		return {
			navBar: {
				top_bgc: {
					background: 'transparent'
				},
				border: false,
				title: '',
				height: 0,
				iconColor: '#fff'
			},
			swiperList: [],
			swiperCurrent: 0,
			nowNew: {},
			new15: {},
			fullLoading: true
		}
	},
	onLoad() {
		this.getData()
		this.getViewHeight()
	},
	methods: {
		getData() {
			this.$u.api
				.todayNew()
				.then(res => {
					this.disposeData(res.floors)
					this.fullLoading = false
				})
				.catch(err => {
					console.log(err)
					this.$refs.miToast.show({
						title: '数据获取失败，请返回重新进入',
						type: 'error',
						back: true
					})
				})
		},
		disposeData(item) {
			item.forEach((x, i) => {
				switch (x.module_key) {
					case 'gif_banner': // banner
						this.swiperList = item[i].data.items
						break
					case 'one_six_goods_mix':
						this.nowNew = item[i].data
						break
					case 'leaderboard_title':
						this.new15 = item[i].data
						break
				}
			})
		},
		swiperChange(e) {
			this.swiperCurrent = e.detail.current
		},
		goToDetail(gid) {
			uni.navigateTo({
				url: '../../shop/goods/detail/detail?gid=' + gid
			})
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('#nav-bar')
				.boundingClientRect(data => {
					this.navBar.height = data.height
				})
				.exec()
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > this.navBar.height) {
			this.navBar.top_bgc.background = '#EECB76'
			this.navBar.title = '每日上新'
		} else {
			this.navBar.top_bgc.background = 'transparent'
			this.navBar.title = ''
		}
	},
	filters: {
		tipsImg(time) {
			// 获取当天0点时间戳
			let now = new Date(new Date().toLocaleDateString()).getTime()
			if (now > time) {
				// 过去
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/f3f60ee0-abde-11ea-a30b-e311646dfaf2.png'
			} else if (now == time) {
				// 当天
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/f3fb17f0-abde-11ea-b997-9918a5dda011.png'
			} else {
				// 未开始
				return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/f3e741d0-abde-11ea-9e8b-05a3242b26f2.png'
			}
		}
	},
	components: {
		fullLoading
	}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.nav-title {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 750rpx;
	text-align: center;
	color: #fff;
	font-size: 32rpx;
	letter-spacing: 2rpx;
	font-weight: bold;
}
.top-bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 750rpx;
	background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/32500f00-abd6-11ea-b244-a9f5e5565f30.png') no-repeat center / 100% 100%;
	z-index: -1;
}
.top {
	align-items: center;
	margin-bottom: 100rpx;
	.title-img {
		width: 238rpx;
		height: 46rpx;
	}
	.swiper {
		margin-top: 30rpx;
		height: 426rpx;
		// padding-top: 20rpx;
		width: 750rpx;
		border-radius: 12rpx;
		.swiper-item {
			height: 426rpx;
			position: relative;
			left: 40rpx;
			padding: 20rpx 16rpx 0;
			border-radius: 12rpx;
			// height: 406rpx;
			width: 640rpx !important;
			.img {
				display: block;
				height: 406rpx;
				width: 640rpx;
				border-radius: 12rpx;
				// overflow: hidden;
			}
			.title {
				position: absolute;
				bottom: 20rpx;
				left: 16rpx;
				align-items: center;
				justify-content: center;
				width: 640rpx;
				height: 120rpx;
				color: #fff;
				font-size: 32rpx;
				background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/08e8b7e0-abde-11ea-a30b-e311646dfaf2.png') no-repeat center / 100% 100%;
				.sub {
					margin-top: 10rpx;
					font-size: 26rpx;
					image {
						margin-left: 6rpx;
						width: 76rpx;
						height: 38rpx;
					}
				}
			}
			.tips {
				position: absolute;
				top: 0;
				left: 16rpx;
				height: 226rpx;
				width: 226rpx;
				font-size: 40rpx;
				color: #fff;
				image {
					position: absolute;
					top: 0;
					left: 0;
					width: 226rpx;
					height: 226rpx;
					z-index: 1;
				}
				.date {
					margin-top: 64rpx;
					text-align: center;
					position: relative;
					z-index: 20;
					.sign {
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.dots-box {
		margin-top: 40rpx;
		.item {
			background-color: rgba(255, 255, 255, 1);
			height: 6rpx;
			width: 20rpx;
			border-radius: 6rpx;
			margin: 0 6rpx;
		}
		.active {
			background-color: #f1b75a;
			width: 42rpx;
		}
	}
}
.card {
	width: 710rpx;
	margin: 20rpx;
	border-radius: 12rpx;
	background-color: #fff;
	.head {
		height: 108rpx;
		padding: 0 20rpx;
		background-size: 100% 100%;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
		.sub {
			font-size: 24rpx;
			color: #666;
			margin-left: 16rpx;
		}
		.more {
			margin-left: auto;
			font-size: 24rpx;
		}
	}
	.goods-box {
		position: relative;
		padding: 20rpx;
		font-size: 28rpx;
		.goods-img {
			width: 200rpx;
			height: 200rpx;
			.u-wrap {
				background-color: rgba(0, 0, 0, 0.02) !important;
			}
		}
		.content {
			height: 200rpx;
			padding: 4rpx 0 2rpx 16rpx;
		}
		.title {
			width: 440rpx;
			font-size: 30rpx;
			color: #333;
			line-height: 42rpx;
		}
		.subtitle {
			font-size: 24rpx;
			color: rgb(153, 153, 153);
			margin-top: 8rpx;
			line-height: 36rpx;
		}
		.selling-point {
			text {
				display: inline-block;
				margin-right: 8rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #999;
				border-radius: 36rpx;
				background-color: rgb(248, 248, 248);
			}
		}
		.price {
			margin-top: auto;
			color: rgb(227, 13, 13);
			font-size: 26rpx;
			height: 40rpx;
			font-family: 'AllAndNone';
			.priceMin {
				font-size: 34rpx;
				margin-right: 4rpx;
				font-weight: bold;
			}
			.marketPrice {
				margin-left: 6rpx;
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
			}
			.spec {
				font-size: 24rpx;
			}
			.go-to-detail {
				margin-left: auto;
				color: #fff;
				border-radius: 8rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				height: 46rpx;
				line-height: 46rpx;
				background-image: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
			}
		}
		.labelbox {
			margin-top: 12rpx;
			text {
				display: inline-block;
				margin-right: 10rpx;
				padding: 0 10rpx;
				height: 32rpx;
				border-radius: 4rpx;
				text-align: center;
				color: #ffffff;
				background-color: #d96b6c;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}
		.ranking {
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			width: 44rpx;
			height: 48rpx;
		}
	}
}
.now-new {
	.goods-box {
		.title {
			width: 440rpx;
			font-size: 30rpx;
			color: #333;
			line-height: 42rpx;
		}
		.subtitle {
			align-self: baseline;
			padding: 2rpx 16rpx;
			border-radius: 4rpx;
			color: #9f8052;
			background-color: #fdf6e2;
		}
		.selling-point {
			text {
				display: inline-block;
				margin-right: 8rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #999;
				border-radius: 36rpx;
				background-color: rgb(248, 248, 248);
			}
		}
		.price {
			margin-top: auto;
			color: rgb(227, 13, 13);
			font-size: 26rpx;
			height: 40rpx;
			font-family: 'AllAndNone';
			.priceMin {
				font-size: 34rpx;
				margin-right: 4rpx;
				font-weight: bold;
			}
			.marketPrice {
				margin-left: 6rpx;
				font-size: 24rpx;
				color: #999;
				text-decoration: line-through;
			}
			.spec {
				font-size: 24rpx;
			}
			.go-to-detail {
				margin-left: auto;
				color: #fff;
				border-radius: 8rpx;
				padding-left: 16rpx;
				padding-right: 16rpx;
				height: 46rpx;
				line-height: 46rpx;
				background-image: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
			}
		}
		.labelbox {
			margin-top: 12rpx;
			text {
				display: inline-block;
				margin-right: 10rpx;
				padding: 0 10rpx;
				height: 32rpx;
				border-radius: 4rpx;
				text-align: center;
				color: #ffffff;
				background-color: #d96b6c;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}
	}
	.goods-box-row {
		padding: 40rpx 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		flex-wrap: wrap;
		border-radius: 0 0 12rpx 12rpx;
		background-color: rgb(248, 227, 173);
		.content {
			position: relative;
			width: 210rpx;
			padding-bottom: 10rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			text-align: center;
			background-image: linear-gradient(rgb(255, 241, 204), rgb(255, 244, 228));
			.goods-img {
				width: 210rpx;
				height: 210rpx;
			}
			.title {
				font-size: 26rpx;
				padding: 0 10rpx;
				margin-top: 30rpx;
			}
			.subtitle {
				position: absolute;
				top: 210rpx;
				left: 50%;
				transform: translate(-50%, -50%);
				white-space: nowrap;
				padding: 2rpx 12rpx;
				font-size: 24rpx;
				border-radius: 32rpx;
				background-color: #ffd974;
			}
			.price {
				margin-top: 10rpx;
				color: rgb(227, 13, 13);
				font-size: 24rpx;
				height: 40rpx;
				font-family: 'AllAndNone';
				.priceMin {
					font-size: 28rpx;
					margin-right: 4rpx;
					font-weight: bold;
				}
				.spec {
					font-size: 24rpx;
				}
			}
		}
	}
}
.ad-banner {
	margin: 30rpx 0;
	padding: 0 20rpx;
	image {
		width: 710rpx;
		height: 280rpx;
		border-radius: 12rpx;
	}
}
.full-loading {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	height: 40vh;
	background-color: #ffffff;
}
</style>
